<template>
  <!-- 右侧菜单 -->
  <el-container
    v-loading="loading"
    class="ik-container"
  >
    <!-- 顶部标题信息 -->
    <el-header height="42px">
      <span class="ik-board-title">
        <span class="logo" />
        产品总貌
        <div class="time">
          <span>{{ time.value }}</span>
        </div>
      </span>
    </el-header>

    <!-- 数据区 -->
    <el-main>
      <el-row
        :gutter="20"
        class="board-row"
      >
        <!-- 工序异常异常构成 -->
        <el-col
          :span="8"
          class="board-col"
          style="  height: 450px"
        >
          <ik-bar-stack-chart
            code="1-2"
            title="工序异常异常构成"
            :data="[
              {'process':'工艺模型1', 'materiel':'物料1', 'value': '84.63'},
              {'process':'工艺模型1', 'materiel':'物料2', 'value': '14.52'},
              {'process':'工艺模型1', 'materiel':'物料3', 'value': '4.64'},
              {'process':'工艺模型2', 'materiel':'物料4', 'value': '197.72'},
              {'process':'工艺模型2', 'materiel':'物料5', 'value': '27.34'},
              {'process':'工艺模型2', 'materiel':'物料6', 'value': '8.67'},
              {'process':'工艺模型3', 'materiel':'物料3', 'value': '251.24'},
              {'process':'工艺模型3', 'materiel':'物料4', 'value': '20.16'},
              {'process':'工艺模型3', 'materiel':'物料5', 'value': '9.98'},
              {'process':'工艺模型4', 'materiel':'物料3', 'value': '63.24'},
              {'process':'工艺模型4', 'materiel':'物料4', 'value': '17.16'},
              {'process':'工艺模型4', 'materiel':'物料5', 'value': '95.98'},
              {'process':'工艺模型5', 'materiel':'物料1', 'value': '84.63'},
              {'process':'工艺模型5', 'materiel':'物料5', 'value': '9.98'},
              {'process':'工艺模型5', 'materiel':'物料4', 'value': '197.72'},
              {'process':'工艺模型6', 'materiel':'物料2', 'value': '14.52'},
              {'process':'工艺模型6', 'materiel':'物料3', 'value': '4.64'},
              {'process':'工艺模型6', 'materiel':'物料5', 'value': '95.98'},
              {'process':'工艺模型7', 'materiel':'物料5', 'value': '27.34'},
              {'process':'工艺模型7', 'materiel':'物料6', 'value': '8.67'},
              {'process':'工艺模型7', 'materiel':'物料3', 'value': '251.24'},
              {'process':'工艺模型8', 'materiel':'物料4', 'value': '20.16'},
              {'process':'工艺模型8', 'materiel':'物料3', 'value': '63.24'},
              {'process':'工艺模型8', 'materiel':'物料1', 'value': '17.16'},
            ]"
            data-dimension-field="value"
            first-analysis-dimension-field="process"
            second-analysis-dimension-field="materiel"
          />
        </el-col>
        <!-- 产品数据表 -->
        <el-col
          :span="16"
          class="board-col"
          style="height: 450px"
        >
          <ik-table-base
            code="1"
            title="供应商详情"
            :data="[
              { code: 'M_0001', name: '物料1', planQuantity: 70, ordQuantity: 30, exeQuantity: 30,
                exeRate: 100, defectiveQuantity: 1, defectiveRate: 70 },
              { code: 'M_0002', name: '物料2', planQuantity: 70, ordQuantity: 30, exeQuantity: 30,
                exeRate: 100, defectiveQuantity: 1, defectiveRate: 70 },
              { code: 'M_0003', name: '物料3', planQuantity: 70, ordQuantity: 30, exeQuantity: 30,
                exeRate: 100, defectiveQuantity: 1, defectiveRate: 70 },
              { code: 'M_0004', name: '物料4', planQuantity: 70, ordQuantity: 30, exeQuantity: 30,
                exeRate: 100, defectiveQuantity: 1, defectiveRate: 70 },
              { code: 'M_0005', name: '物料5', planQuantity: 70, ordQuantity: 30, exeQuantity: 30,
                exeRate: 100, defectiveQuantity: 1, defectiveRate: 70 },
              { code: 'M_0006', name: '物料6', planQuantity: 70, ordQuantity: 30, exeQuantity: 30,
                exeRate: 100, defectiveQuantity: 1, defectiveRate: 70 },
              { code: 'M_0007', name: '物料7', planQuantity: 70, ordQuantity: 30, exeQuantity: 30,
                exeRate: 100, defectiveQuantity: 1, defectiveRate: 70 },
              { code: 'M_0008', name: '物料8', planQuantity: 70, ordQuantity: 30, exeQuantity: 30,
                exeRate: 100, defectiveQuantity: 1, defectiveRate: 70 },
              { code: 'M_0009', name: '物料9', planQuantity: 70, ordQuantity: 30, exeQuantity: 30,
                exeRate: 100, defectiveQuantity: 1, defectiveRate: 70 },
              { code: 'M_0010', name: '物料10', planQuantity: 70, ordQuantity: 30, exeQuantity: 30,
                exeRate: 100, defectiveQuantity: 1, defectiveRate: 70 }
            ]"
            :columns="[
              { prop: 'code', label: '物料编码', width: 150 },
              { prop: 'name', label: '物料名称', width: 150 },

              { prop: 'planQuantity', label: '需求数', width: 120 },
              { prop: 'ordQuantity', label: '计划数', width: 120 },
              { prop: 'exeQuantity', label: '完工数', width: 120 },
              { prop: 'exeRate', label: '完工率', width: 120 },
              { prop: 'defectiveQuantity', label: '异常数', width: 120 },
              { prop: 'defectiveRate', label: '异常率', width: 120 },
            ]"
          />
        </el-col>
        <!-- 物料产能时序 -->
        <el-col
          :span="24"
          class="board-col"
          style="  height: 350px"
        >
          <ik-bar-time-chart
            code="1-4"
            title="产能时序"
            :data="[
              { 'materiel': '物料1', time: '2024-01-01 00:00:00', value: '72.97' },
              { 'materiel': '物料2', time: '2024-01-01 00:00:00', value: '62.94' },
              { 'materiel': '物料3', time: '2024-01-01 00:00:00', value: '87.75' },
              { 'materiel': '物料4', time: '2024-01-01 00:00:00', value: '77.87' },
              { 'materiel': '物料5', time: '2024-01-01 00:00:00', value: '81.87' },
              { 'materiel': '物料1', time: '2024-02-01 00:00:00', value: '77.39' },
              { 'materiel': '物料2', time: '2024-02-01 00:00:00', value: '67.39' },
              { 'materiel': '物料3', time: '2024-02-01 00:00:00', value: '87.39' },
              { 'materiel': '物料4', time: '2024-02-01 00:00:00', value: '87.39' },
              { 'materiel': '物料5', time: '2024-02-01 00:00:00', value: '91.39' },
              { 'materiel': '物料1', time: '2024-03-01 00:00:00', value: '83.39' },
              { 'materiel': '物料2', time: '2024-03-01 00:00:00', value: '85.39' },
              { 'materiel': '物料3', time: '2024-03-01 00:00:00', value: '90.39' },
              { 'materiel': '物料4', time: '2024-03-01 00:00:00', value: '92.39' },
              { 'materiel': '物料5', time: '2024-03-01 00:00:00', value: '82.39' },
              { 'materiel': '物料1', time: '2024-04-01 00:00:00', value: '62.39' },
              { 'materiel': '物料2', time: '2024-04-01 00:00:00', value: '62.39' },
              { 'materiel': '物料3', time: '2024-04-01 00:00:00', value: '70.39' },
              { 'materiel': '物料4', time: '2024-04-01 00:00:00', value: '71.39' },
              { 'materiel': '物料5', time: '2024-04-01 00:00:00', value: '72.39' },
            ]"
            time-dimension-start="2024-01-01 00:00:00"
            time-dimension-end="2024-04-01 00:00:00"
            time-dimension-uom="month"
            time-dimension-field="time"
            data-dimension-field="value"
            analysis-dimension-field="materiel"
          />
        </el-col>
      </el-row>
    </el-main>

    <!-- 底部页脚信息 -->
    <el-footer height="36px">
      <el-row :gutter="0">
        <el-col :span="12">
          <span class="ik-footer-info" style="float: left">底部标签</span>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>

// bar
import IkBarStackChart from "@/components/ik/board/chart/bar/stack/IkBarStackChart"
import IkBarTimeChart from "@/components/ik/board/chart/bar/time/IkBarTimeChart"
// table
import IkTableBase from "@/components/ik/board/table/IkTableBase"

export default {
  components: {
    IkTableBase,
    IkBarStackChart,
    IkBarTimeChart
  },
  props: {
  },
  data() {
    return {
      loading: false,
      listLoading: false,
      sysTitle: '',
      time: {
        timer: null,
        value: '2024-04-28 00:00:00'
      }
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    const $this = this
    $this.time.timer = setInterval(function() {
      // $this.$set($this.time, 'value', new Date().toLocaleString())
    }, 1000)
  },
  beforeDestroy() {
    // 清楚定时器
    clearInterval(this.time.timer)
  },
  methods: {
  }
}
</script>

<style lang="scss" >
@import "~@/components/ik/board/styles/board.scss";
.ik-container {
  position: relative;
  width: 100%;
  min-height: 1080px;
  background-image: url("~@/assets/robot/bgmap2.png");
  overflow: auto !important;
}
.el-header {
  position: absolute;
  z-index: 99;
  top: 0;
  height: 42px;
  width: 100%;
  background-image: url("~@/assets/ik/images/board/title.png");
  background-size: 100% 100%;
  color: white;
  font-weight: 800;
  line-height: 50px;
  text-align: center;
  .logo {
    position: absolute;
    left: 0;
    height: 42px;
    width: 155px;
    background-image: url("~@/assets/robot/logo.png");
    background-size: 100% 100%;
  }
  .time {
    position: absolute;
    top: 0;
    right: 15px;
    line-height: 50px;
    font-size: 13px;
    height: 50px;
    span {
      vertical-align: middle;
    }
  }
}

.el-main {
  position: relative;
  top: 42px;
  height: calc(100vh - 88px);
  padding: 0px;
  text-align: center;
}

.el-footer {
  height: 36px;
  background-color: #1482f0;
  color: #FFFFFF;
  /* 页脚 */
  .ik-footer-info {
    height: 36px;
    line-height: 36px;
    background-color: #1482f0;
    color: #FFFFFF;
  }
}
</style>
